<template>
  <u-card :body-style="{ padding: 0 }">
    <template #head>
      <u-icon
        size="28"
        custom-prefix="custom-icon"
        color="#0177fd"
        name="wenjian"
      ></u-icon>
      <text class="u-m-l-10 font-bold u-font-lg">前置任务</text>
    </template>
    <view slot="body">
      <u-cell-group v-if="list.length > 0">
        <u-cell-item
          v-for="(item, index) in list"
          :title="`【${item.phaseName}】 ${item.taskName}`"
          :border-top="false"
          :arrow="false"
        >
          <template #right-icon>
            <u-tag
              :text="TASK_STATUS_TYPES_MAP[item.taskStatus].label"
              :type="TASK_STATUS_TYPES_MAP[item.taskStatus].color"
            ></u-tag>
          </template>
        </u-cell-item>
      </u-cell-group>
      <u-empty v-else mode="data"></u-empty>
    </view>
  </u-card>
</template>
<script lang="ts" setup>
import { getCurrentTaskFrontTaskList } from '@/api/modules/project';
import { TASK_STATUS_TYPES_MAP } from '../../index';

const props = defineProps<{
  taskInfo: any;
}>();
const { taskInfo } = props;

const list = ref<any>([]);
const getList = () => {
  const params = {
    taskId: taskInfo.taskId,
  };
  getCurrentTaskFrontTaskList(params).then((res) => {
    list.value = res;
  });
};
getList();
</script>
<style lang="scss"></style>
